Date range comparisons UI in the style of Google Analytics #605
Conversation
|
Very cool! Quick comment: when I saw these tiles, it took a bit to figure out which range (red or blue) was better. This is where a table of metrics and/or a radar chart could help make the information easier to digest. |
Good point. We have two metrics where higher numbers are worse, wait and variability. A radar chart requires higher numbers to be better on all axes. A table, like the google analytics-style cards, should have green/red coloring on the percentage difference to aid interpretation of better/worse. |
|
Here's three variations of percentage coloring. In this demo case (inbound 7 before and after private car ban on Market), speed and wait are down, score and OTP are up, and variability is unchanged.
I like number 3. In Google Analytics, it is easy to turn the comparison off and back on for the same second date range, using a checkbox in their date range dialog/panel. So if we had that, then it'd be easy to see what the high and low scoring metrics are for the first range. |
|
These changes conflict with UI changes that I'm currently working on, for which I'll send a PR in a few days. It doesn't seem important to have day-by-day comparisons of metrics over two date ranges (which don't necessarily have the same length or start on the same day of the week). I'd just hide the by-day charts when comparing date ranges. Stacked by-day charts with wait times and travel times are hard enough to understand with a single date range. Two stacked charts on top of each other with 4 points per day are even harder to understand. The Summary tab is quite cluttered with two rows of tabs and several different types of user interface elements. When comparing date ranges, it's not clear what the various numbers or charts mean. I'd recommend postponing additional work on this, and wait for the PR with the UI changes I've been working on. |
Proposed changes
#321 #582 The idea is to change the "stop to stop" trip summary (and eventually route summary) to be like the Google Analytics UI. This UI is used for both date range comparisons and for single date ranges. It combines our summary page with the "by day" tab. Essentially a chart for one metric is shown with the cards for all the metrics below that.
The chart can be changed to show metrics corresponding to any card. The cards have been reformatted to be fixed width and fixed height.
To see Google Analytics, log into https://analytics.google.com/ then navigate to “Audience” then “Overview”.
Screenshot
Single date range:
Date range comparison:
Link to demo, if any
https://ot-terence-date-range-compare.herokuapp.com/
Deep link for singe date range:
https://ot-terence-date-range-compare.herokuapp.com/route/KT/1/14506/17344?firstDateRange%5BstartDate%5D=2020-02-26&firstDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&firstDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B6%5D=false
Deep link for date range comparison:
https://ot-terence-date-range-compare.herokuapp.com/route/7/1/15652/15638?firstDateRange%5BstartDate%5D=2020-02-19&firstDateRange%5BstartTime%5D=07%3A00&firstDateRange%5BendTime%5D=10%3A00&firstDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&firstDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&firstDateRange%5BdaysOfTheWeek%5D%5B6%5D=false&secondDateRange%5BstartDate%5D=2020-01-14&secondDateRange%5Bdate%5D=2020-01-28&secondDateRange%5BstartTime%5D=07%3A00&secondDateRange%5BendTime%5D=10%3A00&secondDateRange%5BdaysOfTheWeek%5D%5B0%5D=false&secondDateRange%5BdaysOfTheWeek%5D%5B1%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B2%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B3%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B4%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B5%5D=true&secondDateRange%5BdaysOfTheWeek%5D%5B6%5D=false